<template>
  <div class="searchViewContainer">
     <HeaderBar title="搜索" :isBack="true"/>
     <SearchBar @search="searchInfo" ref="searchBar"/>
     <div class="searchProductContainer">
      <div v-if="searchResult.length>0">
        <div v-for="item,index  in searchResult" :key="item.id" >
          <div class="hotProductLine" v-if="index>0"></div>
          <HotProductItem   :item="item" @item-clicked="itemClicked"/>
        </div>
      </div>
       <div v-else style="padding-top: 50px;">暂无数据</div>
        
      </div>
  </div>
</template>
<script>
import {searchGoods} from '@/api/product'
import HeaderBar from '@/components/Header.vue'
import SearchBar from '@/components/Search.vue'
import HotProductItem from '@/components/HotProductItem.vue'
export default {
    name: 'SearchView',
    components:{
      HeaderBar,
      SearchBar,
      HotProductItem
    },

    data(){
      return {
        searchKey:'',
        searchResult:[]
      }
    },
    mounted(){
      //console.log(this.$route.query.searchKey);
      this.searchKey = this.$route.query.searchKey;
      this.$refs.searchBar.setSearchKey(this.searchKey);
      //console.log(this.searchKey);
      searchGoods({
        q:this.searchKey,
        page:1
      }).then(res=>{
        //console.log(res);
        this.searchResult = res.Data.Items;
      })
    },
    methods:{
      itemClicked(item){
        //console.log("点击了商品",item); 
        this.$router.push({path:'/product',query:{id:item.Id}})
      },
        searchInfo(val){
            this.searchKey = val;
            //console.log(val);
            searchGoods({
              q:this.searchKey,
              page:1
            }).then(res=>{
              //console.log(res);
              this.searchResult = res.Data.Items;
            })
        }

    }
}

</script>
<style scoped>
.searchViewContainer{
    background-color: #950000;
    height: 100%;
    width: 100vw;
    display: flex;
    flex-direction: column;
}
.hotProductLine{
  width: 100%;
  height: 1px;
  background-color: #bbb;
}
.searchProductContainer{
  background-color: white;
  height: 89vh;
  overflow: scroll;
}
</style>